<!--
 * @description: 暗黑模式按钮
 * @Author: Islands
 * @Date: 2023-11-13 11:46:00
 * @LastEditTime: 2024-03-28 01:38:14
-->
<script lang='ts' setup>
import { ref, reactive } from 'vue';
import SvgIcon from '@/components/svg-icon/index.vue';
import { useDark, useToggle } from '@vueuse/core'
const isDark = useDark();
const toggleDark = useToggle(isDark); 

</script>
<template>
    <div class="h-auto" @click="toggleDark()">
        <el-tooltip placement="bottom" :content="isDark?$t(`el.tooltip.dark.light`):$t(`el.tooltip.dark.dark`)" :show-after="2000">
            <svg-icon :icon="isDark?'#icon-taiyang':'#icon-ClearNight-qing-yewan'" pointerStyle="pointer" size="2em" />
        </el-tooltip>
    </div>
</template>
<style lang='scss'  scoped></style>